Sliders Guidelines 滑塊指導規則

Usage  用法

滑塊允許使用者沿著軌道檢視並選擇一個數值(或範圍)。它們非常適合用於調整音量、亮度等設定,或者應用影象濾鏡。滑塊可以使用圖示或標籤來表示數字或相對比例。

滑塊改變的內容要即時更新顯示,這樣使用者能在移動滑塊時直接看到調整的效果。

滑塊可以以幾種方式配置:

  1. Continuous or discrete 連續或離散
    1. Continuous 連續:從一個範圍中選擇一個值,無額外限制。
    1. Discrete 離散:從一系列由終止標記標明的預定值中選擇一個值。
  1. 居中:從正負值範圍內選擇一個值。起始值位於中心位置。
  1. 範圍選擇:在一個滑塊上選擇兩個值以建立一個範圍。
Continuous slider 連續滑塊
Discrete slider 離散滑塊

滑塊必須是連續的或離散的。這兩種配置也可以居中並且具有範圍選擇。

居中滑塊
範圍選擇滑塊

Anatomy 結構

1 Track 2 Stop indicators 3 Handle 4 Value (optional)

Track 軌道;追蹤;跟蹤

軌道顯示滑塊的可選值範圍,包括活動和非活動兩部分。

值的增長方向跟隨書寫方向:LTR語言從左到右遞增,RTL語言則相反。

離散滑塊上的軌道顯示了可用範圍

Stop indicators 停止指示器

在離散滑塊上,停止指示器顯示軌道上的預設值,滑塊會自動吸附到最近的停止點。避免過多停止指示器,以免影響視覺效果和操作。其他型別滑塊的停止指示器僅用於顯示非活動軌道的末端值。

停止指示器在離散滑塊上顯示每個可用值

Handle 手柄

移動手柄以選擇值。對於雙手柄滑塊,可選擇範圍的最小值和最大值。

當按下或拖動控制柄時,其形狀會發生變化
用於具有範圍選擇功能的滑塊是兩個把手

Value (optional) 值(可選)

此數值對應控制柄當前所在位置。數值在控制柄互動時顯示,範圍滑塊每次僅顯示一個值。

當手柄被按下一個值會出現
對於範圍選擇滑塊,值一次僅出現在一個手柄上

Adding extra elements to the slider向滑塊新增額外元素

可以用外部文字輸入欄位代替內建值標籤。滑塊和文字欄位的值會自動同步,並支援透過製表鍵在兩者間切換。

使用tab選擇輸入滑塊值的輸入框

可以在滑塊外部新增圖示或文字,以指示數值範圍,使滑塊範圍更易於識別。這可以替代停止指示器使用。

Behavior   行為

Select and drag 選擇並拖動

透過拖動滑塊選擇一個值。

連續滑塊手柄拖動平滑
離散滑塊拖動時手柄會吸附在最近的停止指示器上

Select jump 選擇跳轉

透過選擇軌道的一部分來選擇一個值。

連續滑塊滑塊手柄移動到所選位置
離散滑塊滑塊手柄移動到最近的停止指示點

Select and arrow 選擇並指向

使用鍵盤控制:

Tab: 選中手柄

箭頭鍵: 調整數值

空格 + 箭頭鍵: 大幅調整數值

連續滑塊滑塊手柄每次移動一個值
離散滑塊滑塊手柄移動到下一個停止指示器

Interaction & style 互動與樣式

點選或拖動時,手柄縮小並顯示數值,提供視覺反饋。

Touch 觸控:手柄縮小並顯示數值。

Cursor 游標:懸停時游標改變,點選時手柄縮小並顯示數值。

滑塊在手柄互動過程中會改變寬度

Focus and navigation 聚焦與導航

滑塊手柄是主要互動元素,因此會獲得初始焦點。使用者可透過方向鍵和鍵盤導航來調整值。

使用箭頭來更改滑塊值

Color contrast  色彩對比度

請使用視覺錨點確保滑塊滿足 Material 可訪問性要求。

當非活動軌道與背景對比度低於3:1時,在軌道兩端新增停止指示器或高對比度圖示(至少3:1)。

圖示使得在低對比度背景下更容易識別滑塊兩端